<!--Created by yangzhiqiang -->
<template>
    <div class="headerTab">
        <header id="header" class="navbar">
            <a class="navbar-brand" href="../devices/list" 
            style="border: none;font-style: normal;margin-left:90px;">open system</a>
            <ul class="nav navbar-nav navbar-avatar pull-right">
                <el-dropdown @command="handleCommand" class="dropdown">
                    <span class="el-dropdown-link" >
                        <span class="hidden-xs-only">超级管理员</span>
                        <span class="thumb-small avatar inline">
                            <img src="../../static/image/default-avatar.jpg" alt="Mika Sokeil" class="img-circle" />
                        </span>
                        <i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </ul>
        </header>
        <nav id="nav" class="nav-primary hidden-xs nav-vertical">
            <ul class="nav affix-top" data-spy="affix" data-offset-top="50">
                <li>
                    <router-link to="/" tag="a">
                        <i class="fa fa-mobile-phone"></i>
                        <span>设备管理</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_calllog" tag="a">
                        <i class="fa fa-key"></i>
                        <span>通话记录</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_apks" tag="a">
                        <i class="fa fa-android"></i>
                        <span>应用管理</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_contacts" tag="a">
                        <i class="fa fa-user"></i>
                        <span>联系人</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_wifis" tag="a">
                        <i class="fa fa-th"></i>
                        <span>WIFI管理</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_location" tag="a">
                        <i class="fa fa-map-marker"></i>
                        <span>地理位置</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_logManager" tag="a">
                        <i class="fa fa-file-text-o"></i>
                        <span>日志管理</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_sms" tag="a">
                        <i class="fa fa-envelope"></i>
                        <span>短信</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_images" tag="a">
                        <i class="fa fa-picture-o"></i>
                        <span>图片</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/show_reportManager" tag="a">
                        <i class="fa fa-file-text-o"></i>
                        <span>报表管理</span>
                    </router-link>
                </li>
            </ul>
        </nav>
        <section id="content">
            <section class="main padder">
                <router-view class="view-box"></router-view>
            </section>
        </section>
        <footer id="footer">
        </footer>
        <a href="../devices/list" class="hide slide-nav-block" data-toggle="class:slide-nav slide-nav-left" data-target="body"></a>
    </div>
</template>

<script type="text/ecmascript-6">
const probeApiV100 = '/probe/api/v100/';
export default {
    name: 'headerTab',
    data() {
        return {
            //todo 这里是data区域
        }
    },
    components: {
        //TODO 添加子组件
    },
    computed: {
        //TODO 计算区
        activeIndex: function () {
            return this.$store.getters.activeIndex;
        }
    },
    methods: {
        //TODO 方法区
        // goBackLogin() {
        //     console.log(11111111111)
        //     //this.$router.push({ path: '/login' });
            
        // },
        handleCommand(command) {
            console.log(2222222)
            //this.$router.push({ path: '/login' });
            this.$axios.get(probeApiV100 + 'auth/logout').then(
                () => {
                    this.$router.push({ path: '/login' })
                }
            )
                .catch(err => { console.log(err) })
        }
    },
    mounted: function () {
        //TODO 函数执行区域
    }
}
</script>
<style lang="scss" scoped>
    .el-dropdown {
        cursor: pointer;
    }

    .el-dropdown:hover {
        background: #e1e5e9;
        box-shadow: inset 0 3px 0 #13c4a5;
        border-color: #337ab7;
        box-sizing: border-box;
    }

    .el-dropdown-link {
        padding: 10px 5px 0 5px;
        display: inline-block;
    }

    .img-circle {
        border-radius: 50%;
    }

    .thumb-small {
        width: 40px;
        height: 40px;
        display: inline-block;
        text-align: center;
    }

    .el-dropdown-menu {
        width: 160px;
    }
    .nav-vertical>ul>li>a {
        height: 59px;
        text-align: center;
        border-bottom: none;
        font-size: 11.5px;
        margin-bottom: 10px;
    }
</style>
